<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../HTML/js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>

		<link rel="stylesheet" type="text/css" href="../HTML/css/page.css" />
	</head>
	<style>
		.pDiv {
			overflow: hidden;
			text-align: center;
			width: 1000;
			/* border: 1px solid #00F; */
		}

		.contentDiv {
			width: 370px;
			height: 330px;
			/* background-color: #2196F3; */
			display: inline-block;
			margin: 5px;
			border: 1px solid #00F; 
		}

		img {
			width: 370px;
			height: 330px;
		}
	</style>
	<body>
		<div id="data">

		</div>
		<div style="text-align: center;margin:250px auto;">
			<div id="pager" class="pager clearfix">
			</div>
		</div>
	</body>
	<script src="../HTML/js/jquery.z-pager.js" type="text/javascript" charset="utf-8"></script>
	<script>
		$("#pager").zPager({
			totalData: 12447,
			htmlBox: $('#wraper'),
			btnShow: true,
			ajaxSetData: false
		});
		
		
		

		function currentPage(currentPage) {
			setPageData(currentPage);
			// console.log("当前页码数：" + currentPage);
		}

		$(function() {
			// setPageData(1);
		})

		function setPageData(currentPage) {
			var url = "http://localhost:8080/SSM/video/getData.do?index=" + ((currentPage - 1) * 12) + "&sum=" + 12;

			$("#data").empty();

			ajaxUtil(url, null, function(res) {
				var html = '<div class="pDiv">';
				for (var i = 0; i < res.length; i++) {
					html += '<div class="contentDiv">' +
								'<a href="' + res[i].url + '" target="_blank">' +
									'<img src="' + res[i].cover + '">' +
									'<p>' + res[i].title + '</p>' +
								'</a>' +
							'</div>';
				}
				html += '</div>';
				$("#data").prepend(html);
			})
		}

		function ajaxUtil(url, data, successFun) {
			$.ajax({
				url: url,
				type: "get",
				// data: data,
				dataType: 'json',
				success: function(res) {
					successFun(res);
				}
			});
		}
	</script>
</html>
